<template>
    <div id="Main">
        <header class="head">
            <figure class="left">
                <span class="iconfont icon-iconfontzhizuobiaozhun22"></span>
            </figure>
            <figure class="center">
                <span>北京市政务服务中心</span>
            </figure>
            <figure class="right">
                <span class="iconfont icon-iconfontzhizuobiaozhun023104"></span>
            </figure>
        </header>
        <nav class="nav">
            <figure class="nav-top">
                <dl>
                    <dt><img src="../assets/img/1.png" alt=""></dt>
                    <dd>餐饮</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/2.png" alt=""></dt>
                    <dd>早餐</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/3.png" alt=""></dt>
                    <dd>下午茶</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/4.png" alt=""></dt>
                    <dd>夜宵</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/5.png" alt=""></dt>
                    <dd>百度专送</dd>
                </dl>
            </figure>
            <figure class="nav-top">
                <dl>
                    <dt><img src="../assets/img/6.png" alt=""></dt>
                    <dd>超市购</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/7.png" alt=""></dt>
                    <dd>水果生鲜</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/8.png" alt=""></dt>
                    <dd>送药上门</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/9.png" alt=""></dt>
                    <dd>品牌馆</dd>
                </dl>
                 <dl>
                    <dt><img src="../assets/img/10.png" alt=""></dt>
                    <dd>新店特惠</dd>
                </dl>
            </figure>
        </nav>
        <figure class="banner">
            <img src="../assets/img/banner.png" alt="">
        </figure>
        <section class="main">
            <p class="p">常用商家</p>
            <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=http://img.waimai.baidu.com/pb/8fde827c52c9461b59937eebeee9d64f53&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
              <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=http://img.waimai.baidu.com/pb/71a5bfc37fc8ec9384be8f5d7236c25e29&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
              <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=http://img.waimai.baidu.com/pb/fb617d06eecc93eab4febcd084fa92885d&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
              <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=http://img.waimai.baidu.com/pb/592f1f5afae7a880961d709dcdbd5c3898&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
              <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=https://img.waimai.baidu.com/pb/a86469079643285a886e0331ab48b16b5f&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
              <figure class="list">
                <img src="//map.baidu.com/maps/services/thumbnails?width=172&height=126&quality=60&src=https://img.waimai.baidu.com/pb/55f5c4401b6992d26f8a6f3501be4e552e&align=center%2Ccenter">

                <figure class="right">
                    <h3>拼豆夜宵（广安门店）</h3>
                    <p class="p2">月售93份</p>
                    <p class="p3">起送费 ￥0 | 配送费￥15｜<span>59分钟</span></p>
                </figure>
            </figure>
        </section>




    </div>
</template>
<script>
export default {
}
</script>

<style lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
#Main{
   .head{
       width: 100%;
       .px2rem(height,90);
       background: rgb(254, 46, 74);
       color: #fff;
       display: flex;
       position: fixed;
       top: 0;
       left: 0;
       .px2rem(line-height,90);
       justify-content: space-between;
       
       .left,.right{
           .px2rem(width, 90);
           text-align: center;
          .iconfont{
              .px2rem(font-size, 35);
          }
       }
       .center{
           flex: 1;
           text-align: center;
           .px2rem(font-size,33);
       }
   }
    .nav{
       background: #fff;
       color: rgb(68, 67, 67);
        .px2rem(margin-top,80);
       .px2rem(padding-top,20);
        .px2rem(padding-bottom,20);
        .nav-top{
             display: flex;
            dl{
                text-align: center;
                .px2rem(padding-top,20);
                .px2rem(padding-bottom,20);
                flex: 1;
               dt{
                   img{
                       width: 50%;
                   }
               } 
               dd{
                    .px2rem(padding-top,10);
               }
            }
        }
       
    }
    .banner{
        .px2rem(padding-left,10);
         .px2rem(padding-right,10);
          .px2rem(padding-bottom,10);
        img{
          width:100%;
        }
    }
    .main{
        .p{
            .px2rem(padding, 25);
            .px2rem(font-size, 25);
            color: rgb(75, 72, 72);
            background: #eee;
        }
        .list{
            border-bottom: 1px solid #ccc;
            display: flex;
            img{
                border: 1px solid #ccc;
                .px2rem(margin, 20);
                 width: 30%;
                 height: 30%;
            }
            .right{
                h3{
                    .px2rem(font-size, 30);
                     color: rgb(63, 62, 62);
                     .px2rem(line-height, 80);
                }
                .p2{
                    .px2rem(line-height, 40);
                     color: rgb(160, 153, 153);
                       .px2rem(font-size, 20);
                }
                .p3{
                    .px2rem(line-height, 40);
                    color: rgb(160, 153, 153);
                     .px2rem(font-size, 20);
                    span{
                        color: #f00;
                    }
                }
            }

        }
    }



}
</style>
